<template>
  <div v-loading="loading">
    <el-card>
      <div slot="header">
        <span> 角色列表({{ obj.total }}) </span>
      </div>
      <div>
        <el-table
          :data="obj.dataList"
          style="width: 100%"
        >
          <el-table-column
            prop="name"
            label="名称"
          />
          <el-table-column
            prop="task"
            width="80px"
            label="任务"
          />
          <el-table-column
            prop="job"
            width="80px"
            label="职业"
          />
          <el-table-column
            prop="level"
            width="60px"
            label="等级"
          />
          <el-table-column
            prop="step"
            width="60px"
            label="阶级"
          />
          <el-table-column
            prop="is_online"
            width="60px"
            label="状态"
          />
          <el-table-column
            fixed="right"
            label="操作"
            width="100px"
          >
            <template slot-scope="{row}">
              <el-popconfirm title="确定删除?" @onConfirm="deleteObj(row.id)">
                <el-button slot="reference" size="mini" type="text">
                  删除
                </el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <pagination v-show="obj.total>0" :total="obj.total" :page.sync="obj.filter.page_num" :limit.sync="obj.filter.page_size" @pagination="getObjList" />
      </div></el-card>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import {
  deleteWorkerApi as deleteObjApi,
  getWorkerListApi as getObjListApi
} from '@/api/workflow'
export default {
  name: 'Worker',
  components: { Pagination },
  props: {
    workId: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      loading: false,
      obj: {
        total: 0,
        dataList: [],
        filter: {
          page_num: 1,
          page_size: 20
        }
      }
    }
  },
  watch: {
    workId: function() {
      this.getObjList()
    }
  },
  created() {
    this.getObjList()
  },
  activated() {
    this.getObjList()
  },
  methods: {
    getObjList() {
      this.loading = true
      if (this.workId === null) {
        this.loading = false
        return
      }
      const data = {
        obj_id: this.workId
      }
      getObjListApi(data).then(resp => {
        if (resp.code === 0) {
          this.obj.dataList = resp.data.data_list
          this.obj.total = resp.data.total
        }
        this.loading = false
      })
    },
    deleteObj(obj_id) {
      this.loading = true
      const data = {
        work_id: parseInt(this.workId),
        user_id: parseInt(obj_id)
      }
      deleteObjApi(data).then(resp => {
        if (resp.code === 0) {
          this.$notify({
            message: '操作成功',
            type: 'success',
            duration: 2000
          })
          this.getObjList()
        }
      })
    }
  }
}
</script>
